<template>
  <div class="p-4 bg-white">
    <!-- {{ loading }} -->
    客户信息
    <Descriptions bordered class="" title="Custom Size" :size="size"
      ><!-- class="bg-red-500/50" -->
      <template #extra>
        <a-button type="primary">Edit</a-button>
      </template>
      <DescriptionsItem label="Product">Cloud Database</DescriptionsItem>
      <DescriptionsItem label="Billing">Prepaid</DescriptionsItem>
      <DescriptionsItem label="Time">18:00:00</DescriptionsItem>
      <DescriptionsItem label="Amount">$80.00</DescriptionsItem>
      <DescriptionsItem label="Discount">$20.00</DescriptionsItem>
      <DescriptionsItem label="Official">$60.00</DescriptionsItem>
      <DescriptionsItem label="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication factor: 3
        <br />
        Region: East China 1
        <br />
      </DescriptionsItem>
    </Descriptions>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  // import GrowCard from './components/GrowCard.vue';
  // import SiteAnalysis from './components/SiteAnalysis.vue';
  // import VisitSource from './components/VisitSource.vue';
  // import VisitRadar from './components/VisitRadar.vue';
  // import SalesProductPie from './components/SalesProductPie.vue';
  import type { DescriptionsProps } from 'ant-design-vue';
  import { Descriptions, DescriptionsItem } from 'ant-design-vue';
  const size = ref<DescriptionsProps['size']>('default');
  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>
